<template>
  <div>
    <div v-if="detail.Charges" class="list">
      <template v-for="(item, index) in detail.Charges">
        <!-- 参报培训科目 -->
        <div v-if="item.Code == 'Train'" :key="index" class="gl_mb_20 gameEntry_shadow">
          <el-row class="gl_py_5" type="flex" justify="space-between">
            <el-col :span="20">
              <span class="charge_item_title gl_mr_20">{{ item.Name }}</span>
            </el-col>
          </el-row>
          <el-table class="gl_table_noBorder" :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="培训科目" />
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="gl_py_5 gl_mt_10 gl_fs_14 gl_ft_weight" type="flex" justify="end">
            <el-col :span="4" align="left">
              <span>共报：{{ item.ItemsCount }} 项科目</span>
            </el-col>
            <el-col :span="4" align="left">
              <span>合计：<span class="gl_color_error">{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 参报考试科目 -->
        <div v-if="item.Code == 'Exam'" :key="index" class="gl_mb_20 gameEntry_shadow">
          <el-row class="gl_py_5" type="flex" justify="space-between">
            <el-col :span="20">
              <span class="charge_item_title gl_mr_20">{{ item.Name }}</span>
            </el-col>
          </el-row>
          <el-table class="gl_table_noBorder" :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="考试科目" />
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="gl_py_5 gl_mt_10 gl_fs_14 gl_ft_weight" type="flex" justify="end">
            <el-col :span="4" align="left">
              <span>共报：{{ item.ItemsCount }} 项科目</span>
            </el-col>
            <el-col :span="4" align="left">
              <span>合计：<span class="gl_color_error">{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 食宿费用 -->
        <div v-if="item.Code == 'Hotel'" :key="index" class="gl_mb_20 gameEntry_shadow">
          <el-row class="gl_py_5" type="flex" justify="space-between">
            <el-col :span="20">
              <span class="charge_item_title gl_mr_20">{{ item.Name }}</span>
            </el-col>
          </el-row>
          <el-table class="gl_table_noBorder" :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="酒店名称" />
            <el-table-column prop="RoomType" label="房型" />
            <el-table-column prop="DinnerType" label="餐食" :width="160" />
            <el-table-column prop="DayCount" label="天数" :width="120">
              <template slot-scope="{ row }">
                <span>{{ row.DayCount }}天</span>
              </template>
            </el-table-column>
            <el-table-column prop="Comment" label="备注" :width="220">
              <template slot-scope="{ row }">
                <span>{{ row.Comment || '- -' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="gl_py_5 gl_mt_10 gl_fs_14 gl_ft_weight" type="flex" justify="end">
            <el-col :span="4" align="left">
              <span>共选：{{ item.ItemsCount }} 家</span>
            </el-col>
            <el-col :span="4" align="left">
              <span>合计：<span class="gl_color_error">{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 会员费用 -->
        <div v-if="item.Code == 'Membership'" :key="index" class="gl_mb_20 gameEntry_shadow">
          <el-row class="gl_py_5" type="flex" justify="space-between">
            <el-col :span="20">
              <span class="charge_item_title gl_mr_20">{{ item.Name }}</span>
            </el-col>
          </el-row>
          <el-table class="gl_table_noBorder" :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="会员类型" />
            <el-table-column prop="YearCount" label="年限" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.YearCount }}年</span>
              </template>
            </el-table-column>
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="gl_py_5 gl_mt_10 gl_fs_14 gl_ft_weight" type="flex" justify="end">
            <el-col :span="4" align="left">
              <span>共计：{{ item.ItemsCount }} 个</span>
            </el-col>
            <el-col :span="4" align="left">
              <span>合计：<span class="gl_color_error">{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
        <!-- 其他费用 -->
        <div v-if="item.Code == 'Other'" :key="index" class="gl_mb_20 gameEntry_shadow">
          <el-row class="gl_py_5" type="flex" justify="space-between">
            <el-col :span="20">
              <span class="charge_item_title gl_mr_20">{{ item.Name }}</span>
            </el-col>
          </el-row>
          <el-table class="gl_table_noBorder" :data="item.Items" size="mini">
            <el-table-column type="index" label="序号" :width="80" align="center" />
            <el-table-column prop="Name" label="费用名称" />
            <el-table-column prop="Amount" label="价格" :width="160">
              <template slot-scope="{ row }">
                <span>￥{{ formatMoney(row.Amount) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="gl_py_5 gl_mt_10 gl_fs_14 gl_ft_weight" type="flex" justify="end">
            <el-col :span="4" align="left">
              <span>共计：{{ item.ItemsCount }} 项</span>
            </el-col>
            <el-col :span="4" align="left">
              <span>合计：<span class="gl_color_error">{{ formatMoney(item.CategoryAmount) }}</span> 元</span>
            </el-col>
          </el-row>
        </div>
      </template>
      <!-- 总计 -->
      <el-row class="summary_wrap">
        <el-col :span="5">
          <template v-for="(item, index) in detail.Charges">
            <p v-if="index < 3" :key="index" class="gl_fs_16 gl_ft_weight gl_mt_15">
              <span class="gl_pr_20">{{ item.Name }}</span>
              <span>{{ formatMoney(item.CategoryAmount) }} 元</span>
            </p>
          </template>
        </el-col>
        <el-col :span="5">
          <template v-for="(item, index) in detail.Charges">
            <p v-if="index > 2" :key="index" class="gl_fs_16 gl_ft_weight gl_mt_15">
              <span class="gl_pr_20">{{ item.Name }}</span>
              <span>{{ formatMoney(item.CategoryAmount) }} 元</span>
            </p>
          </template>
        </el-col>
        <el-col :span="8">
          <p class="gl_fs_16 gl_ft_weight gl_mt_15">
            <span class="gl_pr_20">合计</span>
            <span class="gl_color_error">{{ formatMoney(detail.TotalAmount) }}</span>
            <span> 元</span>
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  methods: {
    // 格式化货币格式 （分）
    formatMoney(num) {
      if (typeof num === 'number' && !Number.isNaN(num)) {
        // num 是数字类型 且不是 NaN
        let strNum = String(num); // 金额文本类型
        if (num >= 0) {
          strNum = strNum.padStart(3, '0'); // 用0填充保证最小三位数
          return strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        } else {
          const _mark = strNum.slice(0, 1); // 负号
          const _noMark = strNum.slice(1); // 无负号数值
          strNum = _noMark.padStart(3, '0'); // 用0填充保证最小三位数
          return _mark + strNum.slice(0, -2) + '.' + strNum.slice(-2); // 金额拼接
        }
      } else {
        return '';
      }
    }
  }
};
</script>

<style>
.list .el-table,
.list .el-table__body-wrapper {
  min-height: auto;
  border-radius: 4px;
}
</style>

<style lang="scss" scoped>
.list {
  padding: 15px 15px 30px;
}
.gameEntry_shadow {
  padding: 12px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 10px 36px 0px rgba(0,0,0,0.08);
}
.charge_item_title {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  margin-left: 22px;
}
.summary_wrap {
  padding: 5px 0 39px 34px;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0px 10px 36px 0px rgba(0,0,0,0.08);
}
</style>
